<template>
  <div class="floating-contact">
    <div
      class="contact-button"
      @click="toggleExpand"
    >
      <el-icon>
        <Message v-if="!expanded" />
        <Close v-else />
      </el-icon>
    </div>

    <transition name="slide">
      <div 
        v-if="expanded" 
        class="contact-panel"
      >
        <div class="panel-content">
          <h3>{{ $t('common.contactUs') }}</h3>
          <div class="contact-info">
            <div class="contact-item" @click="callPhone">
              <el-icon><Phone /></el-icon>
              <span>{{ websiteInfo?.phone || '' }}</span>
            </div>
            <div class="contact-item" @click="sendEmail">
              <el-icon><Message /></el-icon>
              <span>{{ websiteInfo?.email || '' }}</span>
            </div>
            <div class="contact-item">
              <el-icon><Location /></el-icon>
              <span>{{ $t('common.address') }}</span>
            </div>
            <div class="contact-item" v-if="websiteInfo?.wechatCode">
              <el-icon><ChatDotRound /></el-icon>
              <span>{{ websiteInfo?.wechatCode || '' }}</span>
            </div>
          </div>
          <div class="wechat-code" v-if="websiteInfo?.wechatCodeUrl">
            <p class="wechat-title">{{ $t('contact.scanToFollow') }}</p>
            <img :src="websiteInfo?.wechatCodeUrl" :alt="websiteInfo?.wechatCode || ''" />
            <span>{{ websiteInfo?.wechatCode || '' }}</span>
          </div>
          <el-button type="primary" @click="openDialog">
            {{ $t('common.sendMessage') }}
          </el-button>
        </div>
      </div>
    </transition>

    <el-dialog
      v-model="showContactForm"
      :title="$t('common.sendMessage')"
      width="400px"
    >
      <el-form label-position="top">
        <el-form-item :label="$t('common.name')">
          <el-input v-model="contactForm.name" />
        </el-form-item>
        <el-form-item :label="$t('common.email')">
          <el-input v-model="contactForm.email" />
        </el-form-item>
        <el-form-item :label="$t('common.message')">
          <el-input v-model="contactForm.message" type="textarea" :rows="4" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="showContactForm = false">
          {{ $t('common.cancel') }}
        </el-button>
        <el-button type="primary" @click="submitContactForm">
          {{ $t('common.send') }}
        </el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import { useI18n } from "vue-i18n";
import { useUserStore } from "@/store/user";
import { ElMessage, ElMessageBox } from "element-plus";
import {
  Service,
  ArrowDown,
  Close,
  ChatDotRound,
  Phone,
  Message,
  Location,
} from "@element-plus/icons-vue";
import Api from "@/api/website";
import { website } from "@/types";

const { t } = useI18n();
const userStore = useUserStore();

// 状态管理
const expanded = ref(false);
const showWechatQR = ref(false);
const showContactForm = ref(false);
const websiteInfo = ref<Partial<website>>({});

// 表单数据
const contactForm = ref({
  name: '',
  email: '',
  message: ''
});

// 方法
const toggleExpand = () => {
  expanded.value = !expanded.value;
};

const openDialog = () => {
  showContactForm.value = true;
};

const submitContactForm = () => {
  // 发送表单的逻辑
  ElMessage.success(t('common.messageSent'));
  contactForm.value = { name: '', email: '', message: '' };
  showContactForm.value = false;
};

const callPhone = () => {
  if (!websiteInfo.value?.phone) return;
  
  ElMessageBox.confirm(
    t("contact.callConfirmation", { phone: websiteInfo.value?.phone }),
    t("contact.confirmation"),
    {
      confirmButtonText: t("contact.send"),
      cancelButtonText: t("common.cancel"),
      type: "info",
    }
  )
    .then(() => {
      window.location.href = `tel:${websiteInfo.value?.phone}`;
    })
    .catch(() => {
      // 用户取消
    });
};

const sendEmail = () => {
  if (!websiteInfo.value?.email) return;
  window.location.href = `mailto:${websiteInfo.value?.email}`;
};

const getContactInfo = async () => {
  try {
    const res = await Api.getWebsiteInfo();
    websiteInfo.value = res;
    console.log('获取联系信息成功:', res);
  } catch (error) {
    console.error('获取联系信息失败:', error);
  }
};

onMounted(() => {
  getContactInfo();
});
</script>

<style scoped lang="scss">
.floating-contact {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: flex-end;

  .contact-button {
    width: 56px;
    height: 56px;
    border-radius: 28px;
    background: var(--primary-color, #1677ff);
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(22, 119, 255, 0.2);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);

    &:hover {
      transform: translateY(-5px);
      box-shadow: 0 8px 24px rgba(22, 119, 255, 0.3);
    }

    .el-icon {
      font-size: 22px;
    }
  }

  .contact-panel {
    background: var(--bg-color, white);
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    margin-bottom: 16px;
    width: 300px;
    overflow: hidden;
    border: 1px solid var(--border-color, #e5e6eb);

    .panel-content {
      padding: 20px;

      h3 {
        margin: 0 0 20px 0;
        font-size: 18px;
        font-weight: 600;
        color: var(--text-color, #1f2329);
        display: flex;
        align-items: center;
        
        &::before {
          content: '';
          display: inline-block;
          width: 4px;
          height: 18px;
          background: var(--primary-color, #1677ff);
          margin-right: 8px;
          border-radius: 2px;
        }
      }

      .contact-info {
        margin-bottom: 20px;
        background: var(--bg-color-secondary, #f5f7fa);
        border-radius: 12px;
        padding: 12px;

        .contact-item {
          display: flex;
          align-items: center;
          padding: 10px;
          margin-bottom: 10px;
          border-radius: 8px;
          transition: all 0.2s ease;
          cursor: pointer;

          &:last-child {
            margin-bottom: 0;
          }
          
          &:hover {
            background: rgba(22, 119, 255, 0.05);
          }

          .el-icon {
            font-size: 18px;
            margin-right: 12px;
            color: var(--primary-color, #1677ff);
            background: rgba(22, 119, 255, 0.1);
            padding: 8px;
            border-radius: 8px;
          }

          span {
            font-size: 14px;
            color: var(--text-color, #1f2329);
            font-weight: 500;
          }
        }
      }

      .wechat-code {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: 20px;
        background: var(--bg-color-secondary, #f5f7fa);
        border-radius: 12px;
        padding: 16px;
        
        .wechat-title {
          font-size: 14px;
          color: var(--text-color, #1f2329);
          margin-bottom: 12px;
          font-weight: 500;
        }

        img {
          width: 140px;
          height: 140px;
          object-fit: contain;
          margin-bottom: 12px;
          border-radius: 8px;
          border: 1px solid var(--border-color, #e5e6eb);
          padding: 4px;
          background: white;
        }

        span {
          font-size: 14px;
          color: var(--text-color, #1f2329);
          font-weight: 500;
        }
      }

      .el-button {
        width: 100%;
        height: 44px;
        font-size: 16px;
        font-weight: 500;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(22, 119, 255, 0.2);
      }
    }
  }
}

// 动画
.slide-enter-active,
.slide-leave-active {
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.slide-enter-from,
.slide-leave-to {
  opacity: 0;
  transform: translateX(30px);
}

// 响应式设计
@media (max-width: 768px) {
  .floating-contact {
    right: 16px;
    bottom: 16px;

    .contact-button {
      width: 48px;
      height: 48px;

      .el-icon {
        font-size: 20px;
      }
    }

    .contact-panel {
      width: 280px;
    }
  }
}
</style>
